<template>
  <view class="detail-container">
    <!-- 状态栏与标题 -->
    <view class="status-bar"></view>
    <view class="header">
      <text class="title">积分申报详情</text>
      <view :class="['status-tag', statusClass]">
        {{ statusMap[detail.status] }}
      </view>
    </view>

    <!-- 主体内容 -->
    <scroll-view scroll-y class="content-wrapper">
      <!-- 基础信息 -->
      <uni-list class="info-section">
        <uni-list-item title="积分类型" :rightText="typeMap[detail.type]" />
        <uni-list-item title="申报分值" :rightText="detail.score.toString()" />
        <uni-list-item title="提交时间" :rightText="detail.createTime" />
      </uni-list>

      <!-- 描述说明 -->
      <view class="description-section">
        <text class="section-title">申报说明</text>
        <text class="content-text">{{ detail.description }}</text>
      </view>

      <!-- 佐证材料 -->
      <view class="file-section">
        <text class="section-title">佐证材料（{{ detail.files.length }}份）</text>
       <!-- <uni-file-picker 
          v-model="detail.files"
          readonly
          :image-styles="{width: '200rpx', height: '200rpx'}"
          @preview="previewFile"
        /> -->
      </view>
	  
	  <!-- 描述说明 -->
	  <view class="description-section" v-if="detail.status=='2'">
	    <text class="section-title" style="color: red;">驳回原因</text>
	    <text class="content-text" style="color: red;">{{ detail.rejectReason }}</text>
	  </view>
	  <button v-if="detail.status==2" class="button button-primary" @click="backApplication">删除记录</button>
	<button v-if="detail.status==0" class="button button-primary" @click="backApplication">撤销申请</button>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '../../../utils/requestUtil';

// 状态映射配置
const statusMap = {
  0: '审核中',
  1: '已通过',
  2: '已驳回'
}

const typeMap = {
  project: '项目积分',
  training: '培训积分',
  activity: '活动积分'
}

// 详情数据模型
const detail = ref({
  id: '',
  type: 'project',
  score: 0,
  description: '',
  files: [],
  createTime: '2025-03-21 14:30',
  status: 0 // 0-审核中 1-已通过 2-已驳回
})

// 状态样式动态绑定
const statusClass = () => {
  return {
    0: 'status-pending',
    1: 'status-approved',
    2: 'status-rejected'
  }[detail.value.status]
}
const backApplication =async()=>{
	// console.log(JSON.stringify(detail.value))
	// return
	// const res = await http.delete("/bole/application/user/"+detail.value.id
	// +"?userId="+parseInt(uni.getStorageSync("userId")))
	// http.delete("/bole/application/user/"+detail.value.id
	// +"?userId="+parseInt(uni.getStorageSync("userId")))
	// .then((res)=>{
	// 	console.log(res)
	// })
	// console.log(res)
	uni.showModal({
		title:"确定撤销申请吗(撤销后会直接删除)",
		success(ref) {
			if(ref.confirm){
				http.delete("/bole/application/user/"+detail.value.id
				+"?userId="+parseInt(uni.getStorageSync("userId")))
				.then((res)=>{
					 uni.$emit('refreshData', { refresh: true });
					uni.navigateBack()
				})
			}else{
				console.log(2)
			}
		},
		fail() {
			wx.showToast("异常")
		}
	})
}
// 文件预览处理（参考网页3）
const previewFile = (e) => {
  uni.previewImage({
    urls: detail.value.files.map(f => f.url),
    current: e.tempFilePath
  })
}

// 加载数据（参考网页4的参数传递）
onLoad((options) => {
  if(options.id) {
    loadDetailData(options.id)
  }
})

// 模拟数据加载
const loadDetailData =async (id) => {
  // 实际应调用uni.request（参考网页8）
  const resData =(await http.get('/bole/application/'+id)).data
  console.log(resData)
  
  try{
	  const files = resData.files.split(',')
	  detail.value={
	  	  ...resData,
	  	  files:files
	  }
  }catch{
	  detail.value={
	  	  ...resData,
	  	  
	  }
  }
 
  console.log(resData)
}
</script>
<style>
	.detail-container {
	  background: #f8f9fa;
	  min-height: 100vh;
	}
	
	.detail-container .status-bar {
	  height: var(--status-bar-height);
	}
	
	.detail-container .header {
	  padding: 24rpx;
	  background: white;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.detail-container .header .title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.detail-container .header .status-tag {
	  padding: 8rpx 24rpx;
	  border-radius: 48rpx;
	  font-size: 24rpx;
	}
	
	.detail-container .header .status-tag.status-pending {
	  background: #fff3e0;
	  color: #ffa726;
	}
	
	.detail-container .header .status-tag.status-approved {
	  background: #e8f5e9;
	  color: #66bb6a;
	}
	
	.detail-container .header .status-tag.status-rejected {
	  background: #ffebee;
	  color: #ef5350;
	}
	
	.detail-container .content-wrapper {
	  height: calc(100vh - 200rpx);
	  padding-top: 24rpx;
	}
	
	.detail-container .content-wrapper .section-title {
	  display: block;
	  font-size: 28rpx;
	  color: #666;
	  margin-bottom: 16rpx;
	}
	
	.detail-container .content-wrapper .info-section {
	  margin-bottom: 32rpx;
	  border-radius: 16rpx;
	  overflow: hidden;
	}
	
	.detail-container .content-wrapper .description-section {
	  padding: 24rpx;
	  background: white;
	  border-radius: 16rpx;
	  margin-bottom: 32rpx;
	}
	
	.detail-container .content-wrapper .description-section .content-text {
	  font-size: 28rpx;
	  color: #333;
	  line-height: 1.6;
	}
	
	.detail-container .content-wrapper .file-section {
	  padding: 24rpx;
	  background: white;
	  border-radius: 16rpx;
	}
	/* 基础按钮样式 */
	.button {
		margin-top: 5vh;
		margin-left: 35vw;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  padding: 0.75rem 1.5rem;
	  border-radius: 0.5rem;
	  font-size: 1rem;
	  font-weight: 500;
	  text-align: center;
	  text-decoration: none;
	  transition: all 0.3s ease;
	  cursor: pointer;
	  border: none;
	  outline: none;
	  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	/* 主要按钮变体 */
	.button-primary {
	  background-color: #3B82F6; /* 蓝色 */
	  color: #FFFFFF;
	}
	
	.button-primary:hover {
	  background-color: #2563EB;
	  transform: translateY(-2px);
	  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}
		
	
</style>